<template>
	<view class="team">
		<u--form labelPosition="left" labelWidth="auto" :model="form" :rules="rules" ref="uForm">
			<u-form-item label="队伍名称" prop="name" borderBottom ref="name">
				<u--input v-model="form.name" placeholder="请输入队伍名称" border="none"></u--input>
			</u-form-item>
			<u-form-item label="所属区域" prop="area" borderBottom @click="showSelect('area')" ref="area">
				<u--input v-model="form.areaName" disabled disabledColor="#ffffff" placeholder="请选择所属区域" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="申报单位" prop="sbdw" borderBottom ref="sbdw">
				<u--input v-model="form.sbdw" placeholder="请输入申报单位" border="none"></u--input>
			</u-form-item>
			<u-form-item label="单位类型" prop="dwlx" borderBottom @click="showSelect('dwlx')" ref="dwlx">
				<u--input v-model="form.dwlxName" disabled disabledColor="#ffffff" placeholder="请选择单位类型" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="产业领域" prop="cyly" borderBottom @click="showSelect('cyly')" ref="cyly">
				<u--input v-model="form.cylyName" disabled disabledColor="#ffffff" placeholder="请选择产业领域" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="单位详细地址" prop="address" borderBottom ref="address">
				<u--input v-model="form.address" placeholder="请输入单位详细地址" border="none"></u--input>
			</u-form-item>
			<u-form-item label="邮政编码" prop="yzbm" borderBottom ref="yzbm">
				<u--input type="number" v-model="form.yzbm" maxlength="6" placeholder="请输入邮政编码" border="none"></u--input>
			</u-form-item>
			<u-form-item label="联系人" prop="lxr" borderBottom ref="lxr">
				<u--input v-model="form.lxr" placeholder="请输入联系人" border="none"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" prop="lxdh" borderBottom ref="lxdh">
				<u--input v-model="form.lxdh" placeholder="请输入联系电话" border="none"></u--input>
			</u-form-item>
			<u-form-item label="传真" prop="lxcz" borderBottom ref="lxcz">
				<u--input v-model="form.lxcz" placeholder="请输入传真" border="none"></u--input>
			</u-form-item>
			<u-form-item label="团队类型" prop="tdlx" borderBottom @click="showSelect('tdlx')" ref="tdlx">
				<u--input v-model="form.tdlxName" disabled disabledColor="#ffffff" placeholder="请选择团队类型" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="团队所在单位" prop="tdszdw" borderBottom ref="tdszdw">
				<u--input v-model="form.tdszdw" placeholder="请输入团队所在单位" border="none"></u--input>
			</u-form-item>
			<u-form-item label="团队总人数" prop="zrs" borderBottom ref="zrs">
				<u--input v-model="form.zrs" placeholder="请输入团队总人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="团队40周岁以上人数" prop="sszsysrs" borderBottom ref="sszsysrs">
				<u--input v-model="form.sszsysrs" placeholder="请输入团队40周岁以上人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="团队40周岁以下(含40周岁)人数" prop="sszsyxrs" borderBottom ref="sszsyxrs">
				<u--input v-model="form.sszsyxrs" placeholder="请输入团队40周岁以下(含40周岁)人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="技术职称正高级人数" prop="zgjrs" borderBottom ref="zgjrs">
				<u--input v-model="form.zgjrs" placeholder="请输入正高级人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="技术职称副高级人数" prop="fgjrs" borderBottom ref="fgjrs">
				<u--input v-model="form.fgjrs" placeholder="请输入副高级人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="技术职称其他人数" prop="otherrs" borderBottom ref="otherrs">
				<u--input v-model="form.otherrs" placeholder="请输入其他人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="学历博士人数" prop="bsrs" borderBottom ref="bsrs">
				<u--input v-model="form.bsrs" placeholder="请输入博士人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="学历硕士人数" prop="ssrs" borderBottom ref="ssrs">
				<u--input v-model="form.ssrs" placeholder="请输入硕士人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="学历其他人数" prop="qtxlrs" borderBottom ref="qtxlrs">
				<u--input v-model="form.qtxlrs" placeholder="请输入其他人数" border="none"></u--input>
			</u-form-item>
			<u-form-item label="重要业绩成果" prop="zyyj" borderBottom ref="zyyj">
				<u--input v-model="form.zyyj" placeholder="请输入重要业绩成果" border="none"></u--input>
			</u-form-item>
			<u-form-item label="申报日期" prop="sbrq" borderBottom ref="sbrq" @click="showDatetime()">
				<u--input v-model="form.sbrq" disabled disabledColor="#ffffff" placeholder="请输入申报日期" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item labelPosition="top" label="团队成员间专业结构、关联性、互补性说明" prop="tdcyjg" borderBottom ref="tdcyjg">
				<u--textarea v-model="form.tdcyjg" placeholder="请输入团队成员间专业结构、关联性、互补性说明" count></u--textarea>
			</u-form-item>
			<u-form-item labelPosition="top" label="团队简介" prop="tdjj" borderBottom ref="tdjj">
				<u--textarea v-model="form.tdjj" placeholder="请输入团队简介" count></u--textarea>
			</u-form-item>
		</u--form>
		<u-button @click="submit" type="primary" style="margin-top: 20rpx">保存</u-button>
		<u-action-sheet :show="selectVisible" :actions="actions" :title="actionTitle" @close="selectVisible = false" @select="selectChange"></u-action-sheet>
		<u-datetime-picker
			:show="showDatetimePicker"
			v-model="datetimeValue"
			@cancel="closeDateTime"
			@close="closeDateTime"
			@confirm="confirmDateTime"
			closeOnClickOverlay
			mode="date"
		></u-datetime-picker>
	</view>
</template>

<script>
import { getDicts, getArea } from '@/api/system/dict/data.js';
import { findbyparentid } from '@/api/talents.js';
import { addXSCDW, updateXSCDW } from '@/api/source/kjrc/XSCDW.js';
export default {
	data() {
		return {
			form: {
				name: '',
				cyly: '',
				sbdw: '',
				area: '',
				address: '',
				lxr: '',
				lxdh: '',
				tdlx: '',
				tdjj: ''
			},
			rules: {
				id: [{ required: true, message: 'id不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '队伍名称不能为空', trigger: 'blur' }],

				cyly: [{ required: true, message: '产业领域不能为空', trigger: 'blur' }],
				sbdw: [{ required: true, message: '申报单位不能为空', trigger: 'blur' }],
				area: [{ required: true, message: '所属区域不能为空', trigger: 'blur' }],
				address: [{ required: true, message: '单位地址不能为空', trigger: 'blur' }],
				lxr: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
				lxdh: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
				tdlx: [{ required: true, message: '团队类型不能为空', trigger: 'blur' }],
				tdjj: [{ required: true, message: '团队简介不能为空', trigger: 'blur' }]
			},
			// select选择器隐现
			selectVisible: false,
			// select选择器数据
			actions: [
				{
					name: '男'
				},
				{
					name: '女'
				},
				{
					name: '保密'
				}
			],
			// 当前是谁的actions
			activeActionName: '',
			// 所属区域
			areaList: [],
			// 单位类型
			typeList: [],
			// 产业领域
			territoryList: [],
			// 团队类型
			teamTypeList: [],
			// select选择器title
			actionTitle: '请选择类型',
			// 日期选择器隐显
			showDatetimePicker: false,
			// 日期选择器值
			datetimeValue: '',
			id: ''
		};
	},
	created() {
		this.getUser();
		this.getSelectListAll();
	},
	onLoad(option) {
		this.id = option.id;
	},
	methods: {
		getUser() {
			const value = uni.getStorageSync('userInfo') || [];
			if (value.login_user == null) {
				uni.redirectTo({
					url: '/subpages/pages/register/login_province'
				});
				uni.showToast({
					icon: 'none',
					title: '请先登录！'
				});
			}
		},
		submit() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					if (this.form.id != null) {
						updateXSCDW(this.form).then((response) => {
							uni.$u.toast('操作成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						});
					} else {
						this.form.projectId = this.id;
						addXSCDW(this.form).then((response) => {
							uni.$u.toast('操作成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						});
					}
				})
				.catch((errors) => {
					// uni.$u.toast('校验失败');
				});
		},
		// 获取select所有数据
		getSelectListAll() {
			findbyparentid(0).then((res) => {
				this.territoryList = res.data;
				this.territoryList.forEach((item, index) => {
					this.territoryList[index].id = item.industryId;
				});
			});
			getDicts('ach_dwsx').then((res) => {
				this.typeList = res.data;
				this.typeList.forEach((item, index) => {
					this.typeList[index].name = item.dictLabel;
					this.typeList[index].id = item.dictValue;
				});
			});
			getDicts('person_teamtype').then((res) => {
				this.teamTypeList = res.data;
				this.teamTypeList.forEach((item, index) => {
					this.teamTypeList[index].name = item.dictLabel;
					this.teamTypeList[index].id = item.dictValue;
				});
			});
			getArea().then((res) => {
				this.areaList = res.data;
			});
		},
		showSelect(type) {
			this.activeActionName = type;
			if (type === 'dwlx') {
				this.actions = this.typeList;
			}
			if (type === 'cyly') {
				this.actions = this.territoryList;
			}
			if (type === 'area') {
				this.actions = this.areaList;
			}
			if (type === 'tdlx') {
				this.actions = this.teamTypeList;
			}
			this.selectVisible = true;
		},
		selectChange(e) {
			this.form[this.activeActionName] = e.id;
			this.form[this.activeActionName + 'Name'] = e.name;
			this.$refs.uForm.validateField(this.activeActionName);
		},
		showDatetime() {
			this.showDatetimePicker = true;
		},
		closeDateTime() {
			this.showDatetimePicker = false;
		},
		confirmDateTime(a) {
			this.showDatetimePicker = false;
			this.form.sbrq = this.timestampToYearMonth(a.value);
		},
		timestampToYearMonth(timestamp) {
			const date = new Date(timestamp);
			const YYYY = date.getFullYear();
			const MM = (date.getMonth() + 1).toString().padStart(2, '0');
			const DD = (date.getDate() + 1).toString().padStart(2, '0');
			return `${YYYY}-${MM}-${DD}`;
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
.team {
	padding: 20rpx;
}
/deep/.u-action-sheet__item-wrap {
	overflow: auto;
	max-height: 50vh;
}
</style>
